    <html xmlns="http://www.w3.org/1999/xhtml"  
        xmlns:h="http://java.sun.com/jsf/html"  
        xmlns:f="http://java.sun.com/jsf/core"  
        xmlns:p="http://primefaces.org/ui">  
      
        <h:head>  
      
        </h:head>  
          
        <h:body>  
          
          <p:layout fullPage="true">  
  
    <p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">  
        <h:outputText value="Top unit content." />  
    </p:layoutUnit>  
  
    <p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true">  
        <h:outputText value="South unit content." />  
    </p:layoutUnit>  
  
  
    <p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" effect="drop">  
        <h:outputText value="Right unit content." />  
    </p:layoutUnit>  
  
    <p:layoutUnit position="center">  
              <h:form prependId="false">

              		<p:fieldset id="container" legend="PrimeChat">  
  
        <h:panelGroup rendered="#{chatController.loggedIn}" >  
            <p:outputPanel layout="block" style="width:600px;height:200px;overflow:auto"   
                       styleClass="chatroom" />  
  
            <p:separator />  
  
            <p:inputText value="#{chatController.message}" styleClass="messageInput" />  
            <p:spacer width="5" />  
            <p:commandButton value="Send" actionListener="#{chatController.send}" global="false" oncomplete="$('.messageInput').val('').focus()"/>  
            <p:spacer width="5" />  
            <p:commandButton value="Disconnect" actionListener="#{chatController.disconnect}" global="false"   
                                oncomplete="chatAgent.close()" update="container" />  
        </h:panelGroup>  
  
        <h:panelGroup rendered="#{not chatController.loggedIn}" >  
            Username: <p:inputText value="#{chatController.username}" />  
  
            <p:spacer width="5" />  
            <p:commandButton value="Login" actionListener="#{chatController.login}" update="container"   
                             icon="ui-icon-person"/>  
        </h:panelGroup>  
  
    </p:fieldset>  

              </h:form>
              
              <p:push onmessage="handleMessage" channel="chat" widgetVar="chatAgent" />  
  
<script type="text/javascript">  
    function handleMessage(evt, data) {  
        var chatContent = $('.chatContent');  
        chatContent.append(data + '<br />');  
  
        //keep scroll  
        chatContent.scrollTop(chatContent.height());  
    }  
</script>
    </p:layoutUnit>  
  
</p:layout>  
              
        </h:body>  
    </html>  